<template>
  <div class="container">
    <div class="video-container">
      <video ref="localVideo" autoplay muted class="local-video"></video>
      <video ref="remoteVideo1" autoplay class="remote-video"></video>
      <video ref="remoteVideo2" autoplay class="remote-video"></video>
    </div>
    <div class="button-container">
      <button @click="startCall" class="call-button">提问</button>
      <button @click="endCall" class="end-button">结束</button>
    </div>
    <div class="chat-container">
      <MessageList :messages="messages" ref="messageList" />
      <input
        type="text"
        v-model="chatMessage"
        placeholder="请输入信息"
        class="chat-input"
      />
      <button @click="sendChatMessage" class="send-button">发送</button>
      <div v-if="images.length > 0" class="image-container">
        <h3>Images:</h3>
        <div v-for="(image, index) in images" :key="index" class="image-item">
          <img :src="image" alt="Image" class="image" />
          <button @click="sendImage(index)" class="send-button">发送</button>
        </div>
      </div>
    </div>
    <van-uploader
      v-model="fileList"
      multiple
      @after-read="handleAfterRead"
      class="small-uploader"
    ></van-uploader>
  </div>
</template>

<script>
import { Uploader } from "vant";
import MessageList from "./MessageList.vue";

export default {
  name: "StudyPage",
  components: {
    "van-uploader": Uploader,
    MessageList,
  },
  data() {
    return {
      messages: [],

      // WebRTC相关变量，如连接、媒体流等
      connection: null,
      localStream: null,
      chatMessage: "",
      images: [],
      fileList: [
        { url: "https://img01.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      remoteVideo2Stream: null,
      remoteVideo1Stream: null,
    };
  },
  mounted() {
    // 初始化WebSocket连接
    this.webSocket = new WebSocket("ws://your-websocket-server-url");
  },
  beforeDestroy() {
    // 断开WebSocket连接
    if (this.webSocket) {
      this.webSocket.close();
    }
  },
  methods: {
    startCall() {
      // 处理开始通话的逻辑，如捕获媒体流、发送信令等
      // ...
    },
    endCall() {
      // 处理结束通话的逻辑，如关闭媒体流、断开WebRTC连接等
      // ...
    },
    sendChatMessage() {
      // 发送聊天消息
      const message = {
        type: "chat",
        content: this.chatMessage,
      };
      this.webSocket.send(JSON.stringify(message));
      this.chatMessage = "";
      this.messages.push(message);
      // 调用MessageList组件的scrollToBottom方法
      this.$refs.messageList.scrollToBottom();
    },
    sendImage(index) {
      // 发送图片
      const image = this.images[index];
      const message = {
        type: "image",
        content: image,
      };
      this.webSocket.send(JSON.stringify(message));

      // 移除已发送的图片
      this.images.splice(index, 1);
    },

    handleAfterRead(files) {
      // 在这里处理文件上传后的逻辑
      // 例如，可以将文件添加到 images 数组中，并发送到 WebSocket 服务器
      this.images.push(files[0].url);

      const message = {
        type: "image",
        content: files[0].url,
      };
      this.webSocket.send(JSON.stringify(message));
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.video-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px;
}

.video {
  width: 50%; /* 使用百分比宽度 */
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

.local-video {
  border: 2px solid #007bff;
}

.remote-video {
  border: 2px solid #6c757d;
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.call-button,
.end-button,
.send-button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px; /* 右侧间距 */
  margin-left: 20px; /* 左侧间距 */
}

.chat-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* 添加这行 */
}

.chat-input {
  width: 300px;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.image-container {
  margin-top: 20px;
}

.image-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 10px;
}

.uploader {
  margin-top: 20px;
}

.message-item {
  margin-bottom: 10px;
  font-size: 16px;
}
.small-uploader {
  width: 200px; /* 你可以设置你想要的宽度 */
  height: 50px; /* 你可以设置你想要的高度 */
}
@media (max-width: 600px) {
  .video {
    width: 300px; /* 当屏幕宽度小于600px时，视频的宽度为300px */
  }
}
</style>
